<template>
	<view class="searchbox" @tap.stop="gotoSearch">
		<view class="search-input">			
			<fa-icon class="icon" color="#999" type="search" size="20" @tap='searchConfirm'></fa-icon>			
			<text v-if="!canInput" class="search-text">{{placeholder}}</text>
			<input v-if="canInput" class="search-text" v-model="inputValue" :placeholder="placeholder" @confirm="searchConfirm"/>
		</view>
		<view v-if="canCancle" class="search-cancle" @tap="searchCancel">取消</view>
	</view>
</template>

<script>
	import faIcon from '@/components/kilvn-fa-icon/fa-icon.vue';
	export default{
		name:'searchBox',
		components:{faIcon},
		data(){
			return{
				inputValue:''
			}
		},
		props:{
			placeholder:{
				type:String,
				default(){
					return '请输入专辑名 老师或内容'
				}
			},
			canInput:{
				type:Boolean,
				default:false
			},
			canCancle:{
				type:Boolean,
				default:false
			},
			Keyword:{
				type:String,
				default(){
					return ''
				}
			}
		},
		watch:{
			Keyword(value)
			{
				this.inputValue=value;
			}
		},
		methods:{
			gotoSearch:function(){
				this.$emit('gotoSearch');
			},
			searchConfirm:function(){
				this.$emit('searchConfirm',this.inputValue);
			},
			searchCancel:function(){
				this.$emit('searchCancel');
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.searchbox {
		width: 100%;
		height: 92rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		background: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;		
		z-index: 100;
		display: flex;
	}
	// .searchbox::after {
	// 	content: '';
	// 	position: absolute;
	// 	border-bottom: 1rpx solid #d2d2d2;
	// 	-webkit-transform: scaleY(0.5);
	// 	transform: scaleY(0.5);
	// 	bottom: 0;
	// 	right: 0;
	// 	left: 0;
	// }
	.search-input {	
		flex-grow: 1;
		height: 60rpx;
		background: #f1f1f1;
		border-radius: 30rpx;	
		color: #999;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		padding-left: 20px;
	}
	.search-text {
		padding-left: 16rpx;
		width: 100%;
		font-size: 26rpx;
	}
	.search-cancle{
		font-size: 30rpx;
		color: #999;
		padding-left: 10rpx;
	}
</style>
